<template>
  <!-- 个人季度自评 -->
  <div class="page_padding">
    <MyNavBar @goback="goback" :title="title" />
    <div class="self_titlt" v-if="showTabs">
      <div class="quater_circle">
        <div class="quater_circle_one">
          <p class="circle_one_top">
            <span class="line_one_no"></span>
            <span class="circle_one board_border">1</span>
            <span class="line_one" :class="activeName == '1' ? 'board_back' : ''"></span>
          </p>
          <p class="text_tit board_active">季度总结</p>
        </div>
        <div class="quater_circle_one">
          <p class="circle_one_top">
            <span class="line_one" :class="activeName == '1' ? 'board_back' : ''"></span>
            <span class="circle_one" :class="activeName == '1' ? 'board_border' : ''">2</span>
            <span class="line_one"></span>
          </p>
          <p class="text_tit" :class="activeName == '1' ? 'board_active' : ''">考核登记表</p>
        </div>
        <div class="quater_circle_one">
          <p class="circle_one_top">
            <span class="line_one"></span>
            <span class="circle_one">3</span>
            <span class="line_one_no"></span>
          </p>
          <p class="text_tit">提交</p>
        </div>
      </div>
    </div>
    <div class="return-box" v-if="formData && formData.reason">退回原因： {{ formData.reason }}</div>
    <!-- 页面内容 -->
    <div class="content" v-if="activeName == '0'">
      <!-- 输入模块 -->
      <div class="entry" v-if="isLoadeing">
        <!-- 季度工作小结 -->
        <div class="this_week" v-for="(item, index) in watchData" :key="index">
          <BoardSound :listData="item" :recordTime="item.id === 'workContent' ? recordTime : ''"></BoardSound>
        </div>
        <!-- 问题建议 -->
        <div class="sugg_item">
          <div class="list_text_title">
            <span class="text title-text">问题建议</span>
          </div>
          <div class="suggestion_box">
            <div class="suggestion" v-for="(item, i) in suggestionList" :key="'a' + i">
              <div class="suggestion_info" v-for="(items, index) in item.suggestionData" :key="'b' + index">
                <BoardSimple
                  :listData="items"
                  :title="suggestionList.length > 1 ? i + 1 : ''"
                  showType="suggset"
                  @deleteSug="deleteSug"
                  :deleteShow="suggestionList.length"></BoardSimple>
              </div>
              <div class="suggestion_annex">
                <div class="img_video">
                  <ImgUpload v-bind:albumList.sync="item.suggestionalbumList" :suggestionAnnex="true" />
                </div>
              </div>
            </div>
            <div class="add_box">
              <div class="add_btn" @click="addSug">
                <van-icon name="add-o" style="color: #56462c" />
                <span>添加</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 附件 -->
        <div class="annex">
          <div class="img_video">
            <div class="list_text_title">
              <span class="text title-text">添加图片/视频/附件</span>
            </div>
            <ImgUpload v-bind:albumList.sync="albumList" @temporaryStorage="temporaryStorage" :isAnnex="true" />
          </div>
        </div>
      </div>
    </div>
    <div class="content" v-else-if="activeName == '1'">
      <QuaterSummary ref="quaSum" @subMitData="subMitData" :summaryData="summaryData" :userType="userType" />
    </div>
    <div class="fead_boot" v-if="showTabs">
      <template v-if="activeName == '0'">
        <div class="btn_li" @click="commitBoard('0', '', 'quaterone1')">暂存</div>
        <div class="btn_li" @click="commitBoard('0', '', 'quaterone2')">下一步</div>
      </template>
      <template v-if="activeName == '1'">
        <div class="btn_li" @click="lastStep('0', 'quaterone3')">上一步</div>
        <div class="btn_li" @click="lastStep('1', 'quaterone4')">提交</div>
      </template>
    </div>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
import BoardSound from '@com/BoardSound'
import BoardSimple from '@com/BoardSimple'
import ImgUpload from '@com/ImgUpload'
import QuaterSummary from './components/QuaterSummary'
import {
  addRecordNoteSeason,
  getRecordDetailByPeriod,
  addRecordProblem,
  addRecordNoteSeasonLoading,
  addRecordProblemLoading,
  getFormByNoteId,
  saveForm,
} from '@api/api-documentary.js'
export default {
  name: 'QuarterlyBoard',
  components: {
    MyNavBar,
    BoardSound,
    ImgUpload,
    BoardSimple,
    QuaterSummary,
  },
  props: {},
  data() {
    return {
      activeName: '0',
      showTabs: false,
      summaryData: {},
      showSumTips: true,
      title: '2021年第一季度个人自评',
      // 路由传参
      routerQuery: {},
      enclosureList: [],
      albumList: [],
      allData: [
        {
          title: '本季度个人工作总结',
          entryCont: '',
          audioList: [],
          id: 'workCon',
          required: true,
        },
        {
          title: '教育培训情况',
          entryCont: '',
          id: 'eduCon',
          audioList: [],
          placeholder: '教育培训情况',
          wordLimit: 200,
        },
        {
          title: '奖惩情况',
          entryCont: '',
          id: 'rpCon',
          audioList: [],
          placeholder: '请输入奖惩情况',
          wordLimit: 200,
        },
      ],
      watchData: [],
      // 个人季度评价数据
      chnNumChar: ['一', '二', '三', '四'],
      isLoadeing: false,
      suggestionList: [],
      isCommit: false,
      userType: '1-1', // 用户类型 1-1非领导成员公务员 1-2领导成员公务员  1-3曾经担任领导职务人员和享受非领导职务待遇人员"
      recordTime: '',
      formData: {},
    }
  },
  computed: {},
  watch: {
    allData: {
      // 数据变化时执行的逻辑代码
      handler(news, old) {
        this.watchData = news
      },
      // 开启深度监听
      deep: true,
    },
  },
  created() {},
  mounted() {
    this.routerQuery = Object.assign({}, this.$route.query)
    this.getListIndexOfQuarter()
    this.getFormByNoteId()
  },
  activated() {},
  deactivated() {},
  destroyed() {},
  beforeDestroy() {
    if (!this.isCommit) {
      if (this.activeName == 0) {
        this.temporaryStorage()
      } else {
        this.lastStep('0', 'quaterone3')
      }
    }
  },
  methods: {
    closeTip() {
      this.showSumTips = false
    },
    goback() {
      this.$router.go(-1)
    },
    // 获取季度总结详情
    getListIndexOfQuarter() {
      let that = this
      that.suggestionList = []
      getRecordDetailByPeriod({
        id: that.routerQuery.id,
        optionUserId: localStorage.userId,
        tenantId: localStorage.tenantId,
      }).then(res => {
        let data = res.data
        that.formData = data
        that.recordTime = `(${data.showStartTime}-${data.showEndTime})`
        that.title = data.recordName
        that.allData.forEach(item => {
          item.entryCont = data[item.id] || ''
          item.audioList = data[`${item.id.slice(0, -3)}AudioList`] || []
        })
        that.enclosureList = data.recordFileList
        that.albumList = data.recordFileList
        // 工作建议
        if (data.proConList.length > 0) {
          let list = data.proConList
          list.forEach(item => {
            that.suggestionList.push({
              suggestionData: [
                {
                  id: '',
                  title: '',
                  entryCont: item.proCon,
                  audioList: item.proAudioList,
                  isAt: true,
                  wordLimit: 300,
                },
              ],
              suggestionalbumList: item.proFileList,
              suggestionId: item.id,
            })
          })
        } else {
          that.suggestionList.push({
            suggestionData: [
              {
                id: '',
                title: '',
                entryCont: '',
                audioList: [],
                isAt: true,
                wordLimit: 300,
              },
            ],
            suggestionalbumList: [],
            suggestionId: '',
          })
        }
        that.isLoadeing = true
      })
    },
    commitBoard(saveStatus, annex, loadstatus) {
      for (let index = 0; index < this.allData.length; index++) {
        const item = this.allData[index]
        if ((saveStatus == 1 || loadstatus == 'quaterone2') && item.required && item.entryCont.trim().length < 10) {
          this.$toast.fail(`${item.title}必须大于10个字！`)
          return false
        }
      }
      // 问题建议
      if (saveStatus == 1) {
        let reg = /<[^>]+>/g // 去除html标签
        let regs = /&nbsp;/g // 去除空格标签
        for (let i = 0; i < this.suggestionList.length; i++) {
          if (
            this.suggestionList[i].suggestionData[0].entryCont.length != 0 &&
            this.suggestionList[i].suggestionData[0].entryCont.replace(reg, '').replace(regs, '').trim().length <= 5
          ) {
            // let title = i + 1
            // title = title < 10 ? '0' + title : title
            // if (this.suggestionList.length === 1) {
            //   title = ''
            // }
            // this.$toast.fail(`问题建议${title}内容需要超过5个字`)
            this.$toast.fail(`问题建议内容需要超过5个字`)
            return false
          }
        }
      }
      if (saveStatus == 1) {
        this.$dialog
          .confirm({
            title: '提示',
            message: '提交后不能更改，请确定是否提交?',
          })
          .then(() => {
            this.commitRecordNoteWeek(saveStatus, annex)
          })
          .catch(() => {
            // on cancel
          })
      } else {
        this.commitRecordNoteWeek(saveStatus, annex, loadstatus)
      }
    },
    commitRecordNoteWeek(saveStatus, annex, loadstatus) {
      const proConList = []
      this.suggestionList.forEach(item => {
        proConList.push({
          proCon: item.suggestionData[0].entryCont,
          proFileList: item.suggestionalbumList,
          id: item.suggestionId,
          proAudioList: item.suggestionData[0].proAudioList,
        })
      })
      let obj = {}
      for (let index = 0; index < this.allData.length; index++) {
        const item = this.allData[index]
        obj[item.id] = item.entryCont
        obj[`${item.id.slice(0, -3)}AudioList`] = item.audioList
      }
      if (loadstatus === 'isload' || loadstatus === 'view') {
        addRecordNoteSeasonLoading({
          saveStatus: saveStatus,
          ...this.formData,
          ...obj,
          recordFileList: this.albumList,
          proConList: proConList,
        }).then(res => {
          console.log('实时保存')
        })
      } else {
        addRecordNoteSeason({
          saveStatus: saveStatus,
          ...this.formData,
          ...obj,
          recordFileList: this.albumList,
          proConList: proConList,
        }).then(res => {
          if (res.code === 0) {
            if (saveStatus == 1) {
              this.$toast.success('提交成功')
              this.isCommit = true
              if (this.showTabs) {
                this.saveSum(this.allData[0].entryCont, saveStatus, loadstatus)
              } else {
                setTimeout(() => {
                  this.$router.go(-1)
                }, 500)
              }
            } else if (loadstatus == 'quaterone1' || loadstatus == 'quaterone2') {
              this.saveSum(this.allData[0].entryCont, saveStatus, loadstatus)
            } else {
              if (!annex) {
                this.$toast.success('暂存成功')
              }
            }
          }
        })
      }
    },

    // 附件暂存
    temporaryStorage() {
      this.commitBoard(0, 'annex', 'isload')
    },
    // 删除问题建议
    deleteSug(data) {
      if (this.suggestionList.length > 1) {
        this.suggestionList.splice(data, 1)
      }
    },
    // 新增问题建议
    addSug() {
      let obj = {
        suggestionData: [
          {
            id: '',
            title: '',
            entryCont: '',
            audioList: [],
            isAt: true,
            wordLimit: 300,
            proAudioList: [],
          },
        ],
        suggestionalbumList: [],
      }
      this.suggestionList.push(obj)
    },
    // 保存问题建议
    addRecordProblem(saveStatus, annex, loadstatus) {
      let that = this
      let params = {
        noteId: that.routerQuery.id,
        recordProblemList: [],
        saveStatus: saveStatus,
      }
      this.suggestionList.forEach(item => {
        params.recordProblemList.push({
          content: item.suggestionData[0].entryCont,
          contentVideo: item.suggestionData[0].audioList,
          id: item.suggestionId,
          enclosureList: item.suggestionalbumList,
        })
      })
      if (loadstatus === 'isload' || loadstatus === 'view') {
        addRecordProblemLoading(params).then(res => {
          if (res.status === 200) {
            that.commitRecordNoteWeek(saveStatus, annex, loadstatus)
          }
        })
      } else {
        addRecordProblem(params).then(res => {
          if (res.status === 200) {
            that.commitRecordNoteWeek(saveStatus, annex, loadstatus)
          }
        })
      }
    },

    getFormByNoteId() {
      getFormByNoteId({
        id: this.$route.query.id,
      }).then(res => {
        let data = res.data
        this.summaryData = {}
        if (data && Object.keys(data).length > 0) {
          this.showTabs = true
          this.summaryData = data
          this.userType = '1-' + data.userCategory
        }
      })
    },
    //预览
    viewBoard() {
      this.commitBoard(0, 'annex', 'view')
    },
    saveSum(workContent, saveStatus, loadstatus) {
      let data1 = { saveStatus: saveStatus }
      let data2 = { quartContent: workContent }
      let formData = Object.assign(this.summaryData, data1, data2)
      saveForm({
        ...formData,
      }).then(res => {
        if (res.code == 0) {
          if (loadstatus == 'quaterone1') {
            this.$toast.success('暂存成功')
          } else if (loadstatus == 'quaterone2') {
            this.activeName = '1'
            this.$toast.success('保存成功')
            this.getListIndexOfQuarter()
            this.getFormByNoteId()
          }
        }
      })
    },
    //上一步
    lastStep(saveStatus, loadstatus) {
      if (saveStatus == 1) {
        const extData = this.$refs.quaSum.extData
        console.log(extData)
        if (!extData.userGender) {
          return this.$toast.fail('请完善性别后再提交')
        }
        if (!extData.bornTime) {
          return this.$toast.fail('请完善出生年月后再提交')
        }
        if (extData.userPost.trim().length === 0) {
          return this.$toast.fail('请完善部门及职务后再提交')
        }
        if (!extData.postTime) {
          return this.$toast.fail('请完善任现职时间后再提交')
        }
        if (extData.userPostDuty.trim().length === 0) {
          return this.$toast.fail('请完善从事或分管工作后再提交')
        }
        if (extData.quartTask.trim().length === 0) {
          return this.$toast.fail('请完善本季度工作目标任务后再提交')
        }
        if (extData.quartContent.trim().length === 0) {
          return this.$toast.fail('请完善个人小结后再提交')
        }
        this.$dialog
          .confirm({
            title: '提示',
            message: '提交后不能更改，请确定是否提交?',
          })
          .then(() => {
            this.$nextTick(() => {
              this.$refs['quaSum'].addSum(saveStatus, loadstatus)
            })
          })
          .catch(() => {})
      } else {
        this.$refs['quaSum'].addSum(saveStatus, loadstatus)
      }
    },
    subMitData(workContent, saveStatus, loadstatus) {
      addRecordNoteSeason({
        ...this.formData,
        workCon: workContent,
        saveStatus: saveStatus,
      }).then(res => {
        if (loadstatus == 'quaterone3') {
          this.activeName = '0'
          this.getListIndexOfQuarter()
          this.getFormByNoteId()
        } else if (loadstatus == 'quaterone4') {
          this.isCommit = true
          this.$toast.success('提交成功')
          setTimeout(() => {
            this.$router.go(-1)
          }, 500)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page_padding {
  .self_titlt {
    padding: 8px 12px;
    .quater_circle {
      display: flex;
      align-items: center;
      justify-content: center;
      .quater_circle_one {
        width: 33%;
      }
      .text_tit {
        text-align: center;
        font-size: 13px;
        color: #c0c4cc;
      }
      .circle_one_top {
        display: flex;
        align-items: center;
      }
      .circle_one {
        height: 20px;
        width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid #c0c4cc;
        font-size: 12px;
        font-weight: bold;
        color: #c0c4cc;
      }
      .line_one {
        // width: calc(50%);
        width: calc(50% - 10px);
        height: 1px;
        background-color: #c0c4cc;
        display: inline-block;
      }
      .line_one_no {
        width: calc(50% - 10px);
        height: 0px;
        background-color: #c0c4cc;
        display: inline-block;
      }
      .board_active {
        color: #409eff;
      }
      .board_border {
        border: 1px solid #409eff;
        color: #409eff;
      }
      .board_back {
        background-color: #409eff;
      }
    }
  }
}
.return-box {
  margin-bottom: 5px;
  color: #f56c6c;
  background: #fef0f0;
  padding: 5px;
  font-size: 14px;
}
.content {
  padding-bottom: 50px;
  // padding-top: 23px;
  background-color: #ededed;
  .entry {
    padding: 8px 16px;
    // 问题建议
    // 问题建议
    .suggestion_box {
      .suggestion {
        .suggestion_annex {
          background-color: #fff;
          // margin-bottom: 10px;
          .img_video {
            padding: 10px 16px;
            border-bottom: 1px solid #f0f0f0;
          }
          // 文件上传
          .up_file {
            padding: 20px 16px 0 16px;
          }
        }
      }
      .add_box {
        background-color: #fff;
        padding: 5px 15px;
        color: #004db6;
        display: flex;
        justify-content: center;
        .add_btn {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          padding: 5px 15px;
          border: 1px solid #004db6;
          border-radius: 5px;
          width: 265px;
          span {
            margin-left: 8px;
          }
        }
      }
    }
    .sugg_item {
      background-color: #ffffff;
      padding: 15px 0 5px;
      margin-top: 10px;
      border-radius: 5px;
      overflow: hidden;
      .list_text_title {
        padding: 0 14px;
      }
    }
    // 标题
    .list_text_title {
      font-size: 14px;
      font-weight: bold;
      color: #333;
      margin-bottom: 20px;
      .text {
        background-image: linear-gradient(#ffffff 50%, #f9f1e8);
      }
    }
    .evaluate {
      padding: 20px 16px;
      background-color: #fff;

      .score_select {
        background-color: #fff;
      }
    }
    // 附件
    .annex {
      background-color: #fff;
      margin: 10px 0;
      border-radius: 10px;
      padding: 20px 0;

      .img_video {
        padding: 0 16px;
        border-bottom: 1px solid #f0f0f0;

        .up_box {
          display: flex;
          flex-wrap: wrap;
          padding-bottom: 8px;

          /deep/.up_li {
            width: 92px;
            height: 92px;
            background-color: #f8f8f8;
            border-radius: 1px;
            position: relative;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #999999;
            font-size: 12px;
            .icon {
              font-size: 20px;
              color: #666666;
              margin-bottom: 10;
            }
            .text {
              font-size: 12px;
            }
          }
        }
      }
      // 文件上传
      .up_file {
        padding: 20px 16px 0 16px;
      }
    }

    .reply_item {
      margin: 10px auto;
      border-radius: 5px;
      overflow: hidden;
    }
  }
}
</style>
